<template>
  <div class="myselect">
    <!-- <div class="f-12 abtag"></div> -->
    <el-tag v-if="labeltype" :type="type" size="small" class="abtag f-12">{{
      list[0].tag
    }}</el-tag>
    <el-select
      v-model="labeltype"
      placeholder=""
      size="small"
      class="sopselect"
      :style="{ width: width }"
    >
      <el-option
        v-for="(item, index) in list"
        :key="index"
        :label="item.label"
        :value="item.value"
        class="flexbetween"
      >
        <span class="select-label">{{ item.label }}</span>
        <el-tag :type="type" size="small">{{ item.tag }}</el-tag>
        <!-- <span class="select-tag">{{ item.tag }}</span> -->
      </el-option>
      <!-- <el-option label="含任意关键词" :value="1">
      <span class="select-label">11111</span>
      <span class="select-tag">标准模板</span>
    </el-option> -->
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labeltype: "",
    };
  },
  props: {
    value: [String, Object, Number, Array],
    width: {
      type: String,
      default: "340px",
    },
    list: {
      type: Array,
      default: [],
    },
    type: {
      type: String,
      default: "",
    },
  },
  watch: {
    value: {
      handler(val) {
        this.labeltype = val;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.select-label {
  float: left;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
  cursor: pointer;
}
.select-tag {
  line-height: 20px;
  white-space: nowrap;
  //   background: #fafafa;
  //   border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 2px 7px;
  float: right;
  //   color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
  margin: auto;
}
.myselect {
  display: inline-block;
  position: relative;
}
.abtag {
  position: absolute;
  right: 30px;
  z-index: 9;
  top: 5px;
}
.sopselect {
  ::v-deep .el-input__inner {
    padding-right: 100px;
  }
}
.el-tag {
  &.el-tag--warning {
    color: #d4380d!important;
    background: #fff2e8!important;
    border-color: #ffbb96!important;
  }
}
</style>